function animation() {
    //获取屏幕可见高度
    var menu = document.querySelector(".menu");
    var clientHeight = menu.clientHeight;
    var clientWidth = menu.clientWidth;
    var bgImg = document.querySelector(".bgImg");
    var shade = document.querySelector(".shade");
    var filpHeight = menu.clientHeight / 6;
    var filpWidth = menu.clientWidth / 3;
    var timer1 = null;
    var timer2 = null;
    var rotate = 180;
    var i = 0;
    var canSlide = true;
    var imgList = [
        "src/img/bg1.jpg",
        "src/img/bg2.jpg",
        "src/img/bg3.jpg",
        "src/img/bg4.jpg",
        "src/img/bg5.jpg",
        "src/img/bg6.jpg",
        "src/img/bg7.jpg",
        "src/img/bg8.jpg",
        "src/img/bg9.jpg",
        "src/img/bg10.jpg",
        "src/img/bg11.jpg",
        "src/img/bg12.jpg",
        "src/img/bg13.jpg",
        "src/img/bg14.jpg",
        "src/img/bg15.jpg",
        "src/img/bg16.jpg",
        "src/img/bg17.jpg",
        "src/img/bg18.jpg",
        "src/img/bg19.jpg",
        "src/img/bg20.jpg",
        "src/img/bg21.jpg",
        "src/img/bg22.jpg",
        "src/img/bg23.jpg",
        "src/img/bg24.jpg",
        "src/img/bg25.jpg",
        "src/img/bg26.jpg",
        "src/img/bg27.jpg",
        "src/img/bg28.jpg",
    ]
    var show = parseInt(Math.random() * imgList.length);
    bgImg.style.backgroundImage = `url(${imgList[show]})`
    for (let i = 0; i < 18; i++) {
        var objdiv = document.createElement("div");
        objdiv.className = "filp";
        objdiv.innerHTML = i;
        bgImg.appendChild(objdiv);
    }
    if (clientHeight) {
        var filp = document.querySelectorAll(".filp");
        menu.style.height = `${clientHeight}px`;
        bgImg.style.height = `${clientHeight}px`;
        filp.forEach((el, inx) => {
            el.style.height = `${clientHeight / 6}px`;
            el.style.width = `${clientWidth / 3}px`;
            el.style.backgroundImage = `url(${imgList[i]})`;
            // if (inx < 6) {
            //     filp[inx].style.left = '0px';
            //     filp[inx].style.top = (inx * filpHeight) + 'px';
            //     filp[inx].style.backgroundPositionX = "0px";
            //     filp[inx].style.backgroundPositionY = -(inx * filpHeight) + 'px';
            // } else if (inx > 5 && inx < 12) {
            //     filp[inx].style.left = filpWidth + 'px';
            //     filp[inx].style.top = ((inx % 6)) * filpHeight + 'px';
            //     filp[inx].style.backgroundPositionX = -filpWidth + 'px';
            //     filp[inx].style.backgroundPositionY = -(inx % 6) * filpHeight + 'px';

            // } else {
            //     filp[inx].style.left = 2 * filpWidth + 'px';
            //     filp[inx].style.top = ((inx % 12)) * filpHeight + 'px';
            //     filp[inx].style.backgroundPositionX = -2 * filpWidth+ 'px';
            //     filp[inx].style.backgroundPositionY = -(inx % 12) * filpHeight + 'px';
            // }
            let remainder = inx % 3;
            switch (remainder) {
                case 0:
                    filp[inx].style.backgroundPositionX = "0px";
                    filp[inx].style.backgroundPositionY = -(inx / 3 * filpHeight) + 'px';
                    filp[inx].style.left = '0px';
                    filp[inx].style.top = (inx / 3 * filpHeight) + 'px';
                    break;
                case 1:
                    filp[inx].style.backgroundPositionX = -filpWidth + "px";
                    filp[inx].style.backgroundPositionY = -(parseInt(inx / 3) * filpHeight) + 'px';
                    filp[inx].style.left = filpWidth + 'px';
                    filp[inx].style.top = (parseInt(inx / 3) * filpHeight) + 'px';;
                    break;
                case 2:
                    filp[inx].style.backgroundPositionX = -2 * filpWidth + "px";
                    filp[inx].style.backgroundPositionY = -(parseInt(inx / 3) * filpHeight) + 'px';
                    filp[inx].style.left = 2 * filpWidth + "px";
                    filp[inx].style.top = (parseInt(inx / 3) * filpHeight) + 'px';
                    break;
            }
        });
    }
    shade.addEventListener("mouseenter", function () {
     
        
        if (canSlide) {
            clearInterval(timer2)
            canSlide = false;
            bgImg.style.backgroundImage = "url(src/img/book-bg.jpg)";
            i++;
            rotate = 30;
            if (i >= imgList.length) {
                i = 0;
            }
            timer1 = setInterval(() => {
                rotate += 30
                if (rotate == 180) {
                    rotate == 0
                    clearInterval(timer1);
                }
            }, 200)
            filp.forEach((el, inx) => {
                console.log(el);
                
                var timer2 = setInterval(() => {
                    
                    el.style.backgroundImage = `url(${imgList[i]})`;
                    el.style.webkitTransition = "0.5s linear";
                    el.style.webkitTransform = `perspective(500px) rotateY(${rotate}deg) scale(-1, 1)`;
                    // console.log(el.style.backgroundImage);
                    // console.log(el.style.webkitTransition);
                    // console.log(el.style.webkitTransform);
                }, 100 * inx)
                if (inx == 18) {
                    clearInterval(timer2);
                   
                    timer2 = null;
                    console.log(timer2)
                }
                canSlide = true;
            });
        }
    })

}